<template>
  <div style="width: 700px; height: 300px" id="main"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "LineChart",
  props:["title","legend","xAxis","yAxis","series"],
  mounted() {
    this.drawLine();
  },
  data() {
    return {
      v_title: {
        text: ''
      },
      v_legend: {
        data: ['专著', '作品被引用量', '期刊成果', '会议', '总成果发布量']
        // data: ['总成果发布量', '作品被引用量', '期刊', '会议', '专著']
      },
      v_xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['1999', '2001', '2003', '2005', '2007', '20011', '2019']
        }
      ],
      v_yAxis: [
        {
          type: 'value'
        }
      ],
      v_series: [
        {
          name: '专著',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '作品被引用量',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '期刊成果',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: '会议',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: '总成果发布量',
          type: 'line',
          stack: 'Total',
          label: {
            show: true,
            position: 'top'
          },
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };
  },
  methods: {
    drawLine() {
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      let option;
      this.v_title = this.dataTitle();
      this.v_legend = this.dataLegend();
      this.v_xAxis = this.dataXAxis();
      this.v_yAxis = this.dataYAxis();
      this.v_series = this.dataSeries();
      option = {
        title: this.v_title,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: this.v_legend,
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: this.v_xAxis,
        yAxis: this.v_yAxis,
        series: this.v_series,
      };
      myChart.setOption(option);
    },
    dataTitle(){
      let data = this.title;
      return data;
    },
    dataLegend(){
      let data = this.legend;
      return data;
    },
    dataXAxis(){
      let data = this.xAxis;
      return data;
    },
    dataYAxis(){
      let data = this.yAxis;
      return data;
    },
    dataSeries(){
      let data = this.series;
      return data;
    },
  },
};
</script>
<style></style>


